---
title: 实用的 node 依赖包
description: 实用的 node 依赖包
date: 2022-11-13 17:20:00
---
import Alert from '@/components/post/alert.astro'

[[toc]]

## 自己造的一些常用的轮子

### [@bluesyoung/rpc](https://www.npmjs.com/package/@bluesyoung/rpc)

🌟 基于 `postMessage` + `MessageChannel`

🌟 可用于 `window.open` 打开的页面及 `iframe` 嵌套的子页面与父页面之间的通信(远程函数调用)

🌟 无视跨域限制，拥有安全限制，阻隔恶意消息

**🌟 `100% TypeScript`，拥有近乎完美的类型提示**

🌟 `esm` | `cjs` | `umd`，各种环境一应俱全

🌟 `IOC` 通信与调用解耦


### [@bluesyoung/unplugin-json-conf](https://www.npmjs.com/package/@bluesyoung/unplugin-json-conf)

🌟 在运行/打包过程中，加载指定位置的 `JSON` 文件的内容作为虚拟模块的默认导出内容

### [@bluesyoung/wechat-auth](https://www.npmjs.com/package/@bluesyoung/wechat-auth)

🌟 微信网页授权/网页应用登录，获取授权码

### [@bluesyoung/call-app](https://www.npmjs.com/package/@bluesyoung/call-app)

🌟 基于 `scheme` 的手机浏览器唤端

### [@bluesyoung/qrcode-with-logo](https://www.npmjs.com/package/@bluesyoung/qrcode-with-logo)

🌟 绘制带有 `logo` 的二维码

🌟 在 `qrcode-with-logos` 上进行了部分改进

## 日志相关操作

### [consola](https://www.npmjs.com/package/consola)

🌟 `nuxt` 出品

🌟 服务端/浏览器都可以使用

🌟 可以直接将普通的 `console` 输出直接无感代理

```ts
// 浏览器
import consola, { LogLevel } from 'consola';
// 构建实例
const logger = consola.create({
  // 指定日志输出的等级为 warn 及更加严重的，不配置默认为 info
  level: LogLevel.Warn,
});
// 代理全局的 console，此后所有的输出都会表现为 consola 输出
logger.wrapAll();
```

```ts
// 服务端
import consola, { JSONReporter, BasicReporter, FancyReporter } from 'consola';
const logger = consola.create({
  reporters: [
    new BasicReporter(),
    new FancyReporter(),
    new JSONReporter()
  ],
  defaults: {
    tag: 'young',
    message: 'Aloha',
  }
});
logger.success('lalala');
/**
 * [success] [young] Aloha lalala
 * √ Aloha lalala
 * {"date":"2022-11-19T03:26:13.559Z","args":["Aloha","lalala"],"type":"success","level":3,"tag":"young"}
 */
```

### [log4js](https://www.npmjs.com/package/log4js)

只能在服务端使用

```ts
import Log from 'log4js';
import c from 'picocolors';

const { getLogger } = Log;

export const logger = getLogger('young');
logger.level = process.env.LOG_LEVEL;

export const logger_trace = (info: string = '') => logger.trace(c.inverse(c.bgBlue(info)));
export const logger_debug = (info: string = '') => logger.debug(c.inverse(c.bgCyan(info)));
export const logger_info = (info: string = '') => logger.info(c.inverse(c.bgGreen(info)));
export const logger_warn = (info: string = '') => logger.warn(c.inverse(c.bgYellow(info)));
export const logger_error = (info: string = '') => logger.error(c.inverse(c.bgRed(info)));
export const logger_fatal = (info: string = '') => logger.fatal(c.inverse(c.bgMagenta(info)));
```

## `unjs` 工具包

### [changelogen](https://www.npmjs.com/package/changelogen)

用于根据提交类型自动生成美观的更新日志

### [nitro](https://www.npmjs.com/package/nitro)

🌟 给 `nuxt3` 提供的服务端开发工具

🌟 基于文件路由，全 `TypeScript` 支持

🌟 打包之后的代码不依赖 `node_modules`

### [unbuild](https://www.npmjs.com/package/unbuild)

零配置/低配置代码编译器

### [ufo](https://www.npmjs.com/package/ufo)

`URL` 处理库

### [defu](https://www.npmjs.com/package/defu)

对象合并库，拥有 `TS` 类型支持

### [hookable](https://www.npmjs.com/package/hookable)

异步钩子工具库

### [unimport](https://www.npmjs.com/package/unimport)

自动导入特定目录下文件内暴露的函数及变量

支持 `vue template`

### [rc9](https://www.npmjs.com/package/rc9)

支持简单快捷读写 `.*rc | .conf` 配置文件的库

### [c12](https://www.npmjs.com/package/c12)

智能配置加载，拥有 `TS` 类型支持

### [serve-placeholder](https://www.npmjs.com/package/serve-placeholder)

当服务器不存在对应资源时，返回 404 的智能占位中间件

### [listhen](https://www.npmjs.com/package/listhen)

支持 `https` 自签名的轻量服务框架


## canvas 操作

### [fabric](https://www.npmjs.com/package/fabric)

**`@types/fabric` 需要依赖 `canvas` 包！！！**

<Alert type="warning">**`canvas` 需要从 `github` 拉取，如非必要，不建议使用**</Alert>

```ts
import { fabric } from 'fabric';

// 需要不交互的 canvas 时使用，有交互需求直接实例化 fabric.Canvas
const canvas = new fabric.StaticCanvas('poster', {
  width,
  height
});

// 顶部黑色背景
const top = new fabric.Rect({
  left: 0,
  top: 0,
  fill: 'black',
  width,
  height: topHeight
});
canvas.add(top);

// 图形绘制
const icon = new Image();
// 如果图片跨域，则需要以下两个属性，否则无法正常导出
// 如果先前使用 img 标签获取过该图片，则 img 标签也必须带有 anonymous 属性，否则会导致第二次获取不到！！！
icon.crossOrigin = 'anonymous';
icon.referrerPolicy = 'no-referrer';

icon.src = '图片地址';
icon.onload = () => {
  const oImg = new fabric.Image(icon);
  // 将图片缩放到指定的宽高
  oImg.scaleToHeight(iconWidth);
  oImg.scaleToWidth(iconWidth);

  oImg.left = width / 5 * 2;
  oImg.top = (topHeight - iconWidth) / 2;

  canvas.add(oImg);
};
```

### [fireworks-js](https://www.npmjs.com/package/fireworks-js)

基于 `canvas` 的烟花动效库

## `rpc`

### [comlink](https://www.npmjs.com/package/comlink)

简化 `webworker` 调用

### [vite-plugin-comlink](https://www.npmjs.com/package/vite-plugin-comlink)

`comlink` 的 `Vite` 插件


## 命令行

### [vue-termui](https://www.npmjs.com/package/vue-termui)

使用 `vue` 组件编写命令行程序

### [tasuku](https://www.npmjs.com/package/tasuku)

任务状态指示条

```ts
import task from 'tasuku';

const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));

(async () => {
  /**
   * 串行执行
   */
  await task('Task 1', async ({ setStatus, setOutput }) => {
    await sleep(1000);
  });
  await task('Task 2', async ({ setStatus, setOutput }) => {
    await sleep(1000);
  });
  await task('Task 3', async ({ setStatus, setOutput }) => {
    await sleep(1000);
  });

  /**
   * Or in a group, like this...
   */
  await task.group(
    (task) => [
      task('Group task 1', async ({ setStatus, setOutput }) => {
        await sleep(1000);
      }),
      task('Group task 2', async ({ setStatus, setOutput }) => {
        await sleep(1000);
      }),
      task('Group task 3', async ({ setStatus, setOutput }) => {
        await sleep(1000);
      }),
    ],
    {
      // 并行执行的个数
      concurrency: 2,
    }
  );
})();
```

## 手势

### [any-touch](https://www.npmjs.com/package/any-touch)

支持 PC 端 / 移动端 / 微信小程序

默认加载 6 个手势, 也可按需加载手势, 核心 1kb, 完整 4kb